<template>
  <div class="home">
    <!-- 导航栏 -->
    <NavBar />

    <!-- Hero 区域 -->
    <HeroSection />

    <!-- 特性展示 -->
    <FeaturesSection />

    <!-- 三步上手 -->
    <HowToSection />

    <!-- 模板市场 -->
    <MarketSection />

    <!-- 价格方案 -->
    <PricingSection />

    <!-- 用户反馈 -->
    <FeedbackSection />

    <!-- FAQ -->
    <FaqSection />

    <!-- 最终行动号召 -->
    <section id="final-cta" class="observe">
      <div class="container">
        <h2 data-i18n="final_cta_title">开始创作，释放创意潜能</h2>
        <p data-i18n="final_cta_subtitle">加入数百万创作者的行列，体验 AI 视频创作的无限可能</p>
        <button class="btn-primary" data-i18n="try_free">免费试用</button>
      </div>
    </section>

    <!-- 页脚 -->
    <FooterSection />

    <!-- 返回顶部按钮 -->
    <button class="back-to-top" :class="{ active: showBackToTop }" @click="scrollToTop">
      <i class="fas fa-arrow-up"></i>
    </button>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import NavBar from "@/components/home/NavBar.vue";
import HeroSection from "@/components/home/HeroSection.vue";
import FeaturesSection from "@/components/home/FeaturesSection.vue";
import HowToSection from "@/components/home/HowToSection.vue";
import MarketSection from "@/components/home/MarketSection.vue";
import PricingSection from "@/components/home/PricingSection.vue";
import FeedbackSection from "@/components/home/FeedbackSection.vue";
import FaqSection from "@/components/home/FaqSection.vue";
import FooterSection from "@/components/home/FooterSection.vue";

// 返回顶部按钮状态
const showBackToTop = ref(false);

// 滚动到顶部
const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: "smooth",
  });
};

// 国际化字典
const i18n = {
  zh: {
    final_cta_title: "开始创作，释放创意潜能",
    final_cta_subtitle: "加入数百万创作者的行列，体验 AI 视频创作的无限可能",
    try_free: "免费试用",
  },
  en: {
    final_cta_title: "Start Creating, Unleash Your Creative Potential",
    final_cta_subtitle:
      "Join millions of creators and experience the unlimited possibilities of AI video creation",
    try_free: "Try for Free",
  },
  es: {
    final_cta_title: "Comienza a crear, libera tu potencial creativo",
    final_cta_subtitle:
      "Únete a millones de creadores y experimenta las posibilidades ilimitadas de la creación de videos con IA",
    try_free: "Prueba Gratis",
  },
};

// 应用语言
const applyLang = (lang) => {
  const dict = i18n[lang];
  if (!dict) return;

  document.querySelectorAll("[data-i18n]").forEach((el) => {
    const key = el.dataset.i18n;
    if (dict[key]) el.innerHTML = dict[key];
  });
};

// 处理滚动事件
const handleScroll = () => {
  showBackToTop.value = window.scrollY > 500;
};

// 生命周期钩子
onMounted(() => {
  // 初始化语言
  const savedLang = localStorage.getItem("lang") || "zh";
  applyLang(savedLang);

  // 监听语言变化
  window.addEventListener("storage", (e) => {
    if (e.key === "lang") {
      applyLang(e.newValue);
    }
  });

  // 监听滚动事件
  window.addEventListener("scroll", handleScroll);

  // 设置观察器，当元素进入视口时添加reveal类
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add("reveal");
        }
      });
    },
    { threshold: 0.12 }
  );

  document.querySelectorAll(".observe").forEach((el) => {
    observer.observe(el);
  });
});

onUnmounted(() => {
  // 移除滚动事件监听
  window.removeEventListener("scroll", handleScroll);
});
</script>

<style scoped>
.home {
  overflow-x: hidden;
}
/* 最终行动号召区域样式 */
#final-cta {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  padding: 80px 0;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

#final-cta.reveal {
  opacity: 1;
  transform: translateY(0);
}

#final-cta h2 {
  font-size: 36px;
  margin-bottom: 16px;
}

#final-cta p {
  font-size: 18px;
  margin-bottom: 32px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

#final-cta .btn-primary {
  background: white;
  color: var(--primary);
  border: none;
  padding: 14px 32px;
  border-radius: 30px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

#final-cta .btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* 返回顶部按钮 */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
}

.back-to-top.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--primary-dark);
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* 响应式设计 */
@media (max-width: 768px) {
  #final-cta {
    padding: 60px 0;
  }

  #final-cta h2 {
    font-size: 28px;
  }

  #final-cta p {
    font-size: 16px;
  }

  .back-to-top {
    width: 40px;
    height: 40px;
    font-size: 16px;
    bottom: 20px;
    right: 20px;
  }
}
</style>
